<template>
  <div class="details">
    <div class="details-head">
      <div>
        <el-button type="text" icon="el-icon-arrow-left" style="color: ghostwhite; font-size: 16px"
                   @click="goBack"></el-button>
        <span class="title" style="color: ghostwhite; font-size: 14px">详情</span>
      </div>
      <div class="right">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>
    <div class="details-body">
      <div class="details-body-head">
        <div class="left">
          <img src="@/assets/bj.jpg">
          <span class="l">老王啊</span><br>
          <span class="r">发布于 2020年01月01日</span>
        </div>
        <div class="right">
          <el-button class="yan" type="text" icon="el-icon-view"></el-button>
          <span class="l">次浏览13次</span>
        </div>
      </div>
      <div class="details-body-body">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="details-body-foot">
        <span>二七万达附近个人两室一厅出租无中介费</span>
        <span class="r">/</span>
        <span class="l">郑汴路</span>
      </div>
      <br>
      <div class="details-body-di">
        <div class="wen">
          <div class="aaa">
            <el-button type="text" icon="el-icon-user"></el-button>
            <span>租金：</span><span class="r">￥5000/月</span> <span class="r">押一付一</span> <span
              class="r">可租10个月</span>
          </div>
          <div class="tan">
            <div>
              <div class="left">
                <el-button type="text" icon="el-icon-s-home"></el-button>
                <span>户型：两居室 整租</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-ice-cream-square"></el-button>
                <span>出租类型：整租</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-truck"></el-button>
                <span>地铁：1号线 郑州火车站</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-location-information"></el-button>
                <span>小区：首座国际公寓</span></div>
              <div class="left">
                <el-button type="text" icon="el-icon-edit-outline"></el-button>
                <span>出租有效期：2020年01月01日</span></div>
            </div>
            <div class="right">
              <img src="@/assets/bj.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-foot-a">
      <p class="l">房子居住情况与优点，希望租房的你能够喜欢</p>
      <p>首座国际公寓在政通路大学路上，附近商业店铺聚集，品牌直营店应有尽有。</p>
      <p>
        周边配套成熟，丹尼断，大润发，政通路小学，三五附院，临近二七万达。
        医学院地铁口，未来万达地铁开通出行方便，步行直达。电影院，小吃街，
        服装展示厅，珠宝银饰。完全满足您的生活需求。</p>
    </div>
    <div class="details-foot-b">
      <p class="l">我希望来租房的你是这样的</p>
      <p>男女不限，不养宠物，作息规律</p>
    </div>
    <div class="details-foot-b">
      <p class="l">介绍下我的情况，你会相信我说的话</p>
      <p>郑州本地人，程序猿，兴趣广泛</p>
    </div>
    <div class="details-foot-b">
      <p class="l">在这些时间来看房我比较方便</p>
      <p>最好午休、下班以后和周末</p>
    </div>
    <div class="details-foot-b">
    </div>
    <div class="details-foot">
      <el-footer class="bottom-fixed-bar">
        <div class="left">
          <div>
            <el-button type="text" icon="el-icon-star-off"></el-button>
            <span type="text">收藏</span>
          </div>
          <div>
            <el-button type="text" icon="el-icon-share"></el-button>
            <span type="text">分享</span>
          </div>
          <div>
            <el-button type="text" icon="el-icon-warning"></el-button>
            <span type="text">举报(3)</span>
          </div>
        </div>
        <el-button type="warning" plain>电话联系TA</el-button>
        <el-button type="warning" plain>获取微信</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.push('/')
    },
  },
  created() {
    const  id = this.$route.query.id;
    // 发送axios请求获取详情数据
    if (!id) {
      // 处理错误情况，例如跳转到错误页面或显示默认数据
      return;
    }
    // this.axios.get(`http://localhost:9701/web/`).then(res => {
    //
    // });
  }
}
</script>

<style scoped>
.bottom-fixed-bar .left {
  width: 127px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.details-foot-a .l{
  font-weight: bold;
  color: orange;
  font-size: 16px;
}

.details-foot-a{
  font-weight: bold;
  border-top: 1px dashed #8a8a8a;
  text-align: left;
}

.details-foot-b{
  border-top: 1px dashed #8a8a8a;
  text-align: left;
  margin-bottom: 100px;
  font-weight: bold;
}

.details-foot-b .l{
  font-weight: bold;
  color: orange;
  font-size: 16px;
}

.bottom-fixed-bar {
  position: fixed;
  bottom: 0;
  width: 390px;
  background-color: white;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.tan {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.details-body-di .wen img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 40px;
}

.details-body-di .wen .left {
  width: 250px;
}

.details-body-di .wen .r {
  color: red;
  margin-right: 20px;
}

.details-body-di .wen {
  text-align: left;
}

.details-body-foot {
  text-align: left;
}

.details-body-foot .r {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
}

.details-body-foot .l {
  font-size: 10px;
  color: #c0bebe;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.right .l {
  font-size: 10px;
}

.details-body .right {
  margin-top: 20px;
}

.left .l {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  float: left;
  margin-top: 10px;
  margin-left: 18px;
}

.left .r {
  font-size: 11px;
  color: #c0bebe;
  float: left;
  margin-left: 74px;
  margin-top: -12px;
}

.left img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-left: 15px;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-right: 10px;
}

.right .yan {
  color: #F4A780;
}

.details-body-head {
  margin-top: 10px;
  height: 60px;
}

.title {
  margin-left: 5px;
}

.details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background-color: #f4a881;
}

.details {
  width: 390px;
  height: 100vh;
  border: 1px solid ghostwhite;
  margin: 0 auto;
}

.right {
  display: flex;
  border: 1px solid ghostwhite;
  padding: 5px 5px;
  border-radius: 15px;
  margin-right: 10px;
}

.right button {
  color: ghostwhite;
  padding: 0 5px;
  font-size: 18px;
}
</style>